<!--
* description:线索详情
* author: mwh
* createdDate: 2019-07-24
* logs
-->
<template>
  <div class="app-container app-container-table" ref="appContainer">
    <div class="filter-container filter-title">线索详情</div>
    <el-row class="rowtitle">
      <el-col :span="8"  class="rowcontent">客户姓名</el-col>
      <el-col :span="8"  class="rowcontent">电话</el-col>
      <el-col :span="8"  class="rowcontent">性别</el-col>
    </el-row>
    <el-row style=" margin-left: 20px;">
     <el-col :span="8"  class="rowcontent">陈成</el-col>
      <el-col :span="8"  class="rowcontent">18526373829</el-col>
      <el-col :span="8"  class="rowcontent">男</el-col>
    </el-row>
    <el-row >
     <el-col :span="8"  class="rowtitle">客户画像</el-col>
    </el-row>
    <el-row style=" margin-left: 20px;">
     <el-col :span="8"  class="rowcontent">职业:IT达人 收入:30-50万 年龄:30-40</el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="线索信息" name="crmThisGWACCDistrpage"> 
           <one-table-template
            ref="multipleTable"
            :key="oneTableKey"
            :dynamicButtons="tableButtons"
            :dynamicComponents="tableComponents"
            :dynamicApiConfig="apiConfig"
            :dynamicTableCols="tableCols"
            :dynamicFormFields="formField"
            :dynamicIsInitTable="false"
            :dynamicIsColumnDrop="false"
            :dynamicIsShowSelect="false"
            :dynamicIsFixIndex="false"
            />
      </el-tab-pane>
      <el-tab-pane label="跟进记录" name="cluesAssignedToday">
          <one-table-template
            ref="multipleTable2"
            :key="oneTableKey2"
            :dynamicButtons="tableButtons2"
            :dynamicComponents="tableComponents2"
            :dynamicTableCols="tableCols2"
            :dynamicIsInitTable="false"
            :dynamicIsColumnDrop="false"
            :dynamicIsShowSelect="false"
            :dynamicIsFixIndex="false"
            :dynamicTableDefultHeight="200"
            />
      </el-tab-pane>
      <el-tab-pane label="行为轨迹" name="defeatClueReview">
          <div>
              <div>
                  <img src="" alt="">
                  <span>2020.3.4</span>
                  <span>微信首页浏览</span>
              </div>
          </div>
          <div>
              <div>
                  <img src="" alt="">
                  <span>2020.3.4</span>
                  <span>微信首页浏览</span>
              </div>
          </div>
          <div>
              <div>
                  <img src="" alt="">
                  <span>2020.3.4</span>
                  <span>微信首页浏览</span>
              </div>
          </div>
          <div>
              <div>
                  <img src="" alt="">
                  <span>2020.3.4</span>
                  <span>微信首页浏览</span>
              </div>
          </div>
      </el-tab-pane>
      <el-tab-pane label="订单信息" name="timeOutClue">
        <timeOutClue ref="timeOutClue" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import { crmApis } from "@/api/apiList/crm.js";
import OneTableTemplate from "@/components/templates/oneTable";
import Vue from "vue";

export default {
  name: "cluesManagement",
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],
  components: {
    OneTableTemplate
  },
  data() {
    return {
      activeName: "crmThisGWACCDistrpage",
      // 网格查询API配置对象
      apiConfig: crmApis.dfpvVeN3PlanMonthInfo3QueryListForPage,
      // 动态组件-按钮
      tableButtons: [
           {
          compKey: "btnKey3",
          type: "",
          size: "small",
          clickEvent: () => this.cs(),
          text: "发送短信",
          name: "export",
          position: "right"
        }, // 导出
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          clickEvent: () => this.cs(),
          text: this.$t("sys.button.query"),
          name: "search",
          position: "right"
        }, // 查询
      ],
      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: "compKey1",
          labelName: this.$t("ve.label.carSeriseName"), // 车系
          codeField: "carSeriesId",
          component: () => import("@/components/org/CarCode"),
          type: "dropdownList",
          filterable: true,
          isMust: true
        },
           {
          compKey: "compKey2",
          labelName: this.$t("ve.label.carSeriseName"), // 车系
          codeField: "carSeriesId",
          component: () => import("@/components/org/CarCode"),
          type: "dropdownList",
          filterable: true,
          isMust: true
        },
           {
          compKey: "compKey3",
          labelName: this.$t("ve.label.carSeriseName"), // 车系
          codeField: "carSeriesId",
          component: () => import("@/components/org/CarCode"),
          type: "dropdownList",
          filterable: true,
          isMust: true
        },
        {
          compKey: "compKey4",
          labelName: this.$t("ve.label.carSeriseName"), // 车系
          codeField: "carSeriesId",
          component: () => import("@/components/org/CarCode"),
          type: "dropdownList",
          filterable: true,
          isMust: true
        },
        {
          compKey: 'compKey5',
          labelName: '提报年月' /* 提报年月*/,
          codeField: 'planMonth',
          dateType: 'month',
          type: 'datePicker',
          format: 'yyyy-MM',
          component: () =>
            import('@/components/org/datePicker/datePicker'),
          type: 'datePicker',
          isMust: true,
        },
         {
          compKey: "compKey88",
          labelName: '线索详情备注', //线索详情备注
          codeField: "dlrCode",
          // textField: "dlrCode",
          component: () => import("@/components/org/commonInput"),
          type: "propus",
          // isMul: true,
          isMust: true
        },
      ],
      // 动态生成网格列
      tableCols: [],
      // 表单查询数据
      formField: {
        isHistory: "", //归档数据
        dlrCode: "", //经销商编码
        dlrId: "", //经销商Id（多选）
        bigAreaId: "", //大区Id
        smallAreaId: "", //小区Id
        carSeriesId: "", //车系Id
        planMonth: this.$utils.parseTime(new Date(), "{y}-{m}") //提报年月
      },
      oneTableKey2:"oneTableKey2",
      tableButtons2:[],
      tableComponents2:[],
      tableCols2:[
          {
          prop: "carBrandCn",
          label: '跟进时间', //品牌
          width: null,
          align: "center"
        },
        {
          prop: "carSeriesCode",
          label: '跟进方式', //车系编码
          width: null,
          align: "center"
        },
        {
          prop: "carConfigCode",
          label: '意向车型', //车型编码
          width: null,
          align: "center"
        },
        {
          prop: "smallCarTypeCn",
          label: '意向级别', //车型名称
          width: 350,
          align: "center"
        },
        {
          prop: "n1",
          label: "线索描述", //N+1月
          width: null,
          align: "center"
        },
       
      ],
      // 是否使用刷新Key的方式刷新弹窗
      resetDialogKey: false,
    };
  },
  mounted() {},
  methods: {
      cs(){

      },
    tabClick(tab) {
    //   if (this.$refs[tab.name].$refs.multipleTable) {
    //     this.$refs[tab.name].$refs.multipleTable.setTableHeight(true);
    //   }
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .rowtitle{
    margin-left: 20px;
    color: #e0e0e0;
    margin-bottom: 10px;
    margin-top: 10px;
}
/deep/ .rowcontent{
//    font-size: 16px;
}
/deep/ .el-tabs__nav-scroll {
  overflow: hidden;
  background-color: #ffffff;
  padding-left: 20px;
}
/deep/ .app-container {
  margin-top: 0px;
  background: #fff;
  padding: 10px 10px 0 10px;
}
/deep/ .el-tabs__header {
  margin-bottom: 0px;
  padding: 0px;
}
</style>